<template>
  <n-grid :cols="7" item-responsive>
    <n-grid-item :span="1">
      <div>
        <n-menu :options="options" style="width: 180px" :default-value="defaultFollow" @update:value="handleMenu" />
      </div>
    </n-grid-item>
    <n-grid-item :span="6">
      <div class="follow-right">
        <div style="font-size: 18px;" v-if="activeKey == '1'">全部关注</div>
        <div style="font-size: 18px;" v-else>全部粉丝</div>
        <n-divider style="background-color: #3e4643;" />
        <div v-if="showUser[0]" class="user-message" v-for="item in showUser" :key="item.user_id">
          <div class="message-item">
            <div class="message-content">
              <n-avatar round :size="60" :src="'/api/' + item.avatar" @click="handlePerson(item.user_id)" style="cursor: pointer;"/>
              <div class="message-box">
                <div style="font-size: 16px;color: #63e2b7;cursor: pointer;" @click="handlePerson(item.user_id)">
                  {{ item.username }}
                </div>
                <div style="font-size: 12px;">
                  {{ item.sign }}
                </div>
              </div>
            </div>
            <div class="message-button" v-if="myselfUser_id!=item.user_id">
              <n-button v-if="!item.mutual_follow" @click="handleFollow(true, item.user_id)">关注</n-button>
              <n-button v-else @click="handleFollow(false, item.user_id)">取消关注</n-button>
            </div>
          </div>
          <n-divider style="background-color: #3e4643;"/>
        </div>
        <n-empty v-else :description="activeKey=='1'?'暂无关注':'暂无粉丝'" style="height: 265px;justify-content: center;">
        </n-empty>
      </div>
    </n-grid-item>
  </n-grid>
</template>

<script setup lang='ts'>
import type { MenuOption } from 'naive-ui'
import { ref, onMounted, Ref } from 'vue'
import { FollowUser, GetIdUserMess } from "../../api/user"
import {followDateType} from "../../types/index"
import { useRouter } from 'vue-router';
const router = useRouter()

const options: MenuOption[] = [
  {
    label: "全部关注",
    key: '1'
  },
  {
    label: "全部粉丝",
    key: '2'
  }
]

const props = defineProps<{
  userData: any,
  defaultFollow: string
}>()

const activeKey = ref(props.defaultFollow)
const showUser:Ref<Array<followDateType>> = ref([])
const myselfFollow = ref<number[]>([])
const myselfUser_id = ref<number>()

const handleMenu = (key: string) => {
  if (key === '1') {
    showUser.value = props.userData.follow as any
  } else {
    showUser.value = props.userData.fans as any
  }
  activeKey.value = key
}

const handleFollow = async(is_follow:boolean, user_id:number) => {
  const res = await FollowUser({
    user_id: user_id,
    is_follow: is_follow,
    fans_id: localStorage.getItem("user_id")
  })
  if(res.code == "200"){
    console.log(showUser.value)
    showUser.value.forEach((e:any) => {
      if(e.user_id == user_id){
        e.mutual_follow = !e.mutual_follow
      }
    })
    console.log(showUser.value)
  }else{
    window.$message.warning(res.message)
  }
}

const handlePerson = (user_id:number) => {
  const personUrl = router.resolve({
    path: "/person/" + user_id
  })
  window.open(personUrl.href, '_blank')
  // router.push("/person/" + user_id)
}

onMounted(async() => {
  myselfUser_id.value = Number(localStorage.getItem("user_id"))
  if(props.defaultFollow == "1"){
    showUser.value = props.userData.follow
  }else{
    showUser.value = props.userData.fans
  }
  const user_data = await GetIdUserMess(Number(localStorage.getItem("user_id")))
  if(user_data.code != "200"){
    window.$message.warning(user_data.message)
  }else{
    user_data.data.follow.forEach((e:any) => {
      myselfFollow.value.push(e.user_id)
    })
  }
  props.userData.follow.forEach((item:any) => {
    // 判断是否在数组内
    if(myselfFollow.value.includes(item.user_id)){
      item.mutual_follow = true
    }else{
      item.mutual_follow = false
    }
  })
  props.userData.fans.forEach((item:any) => {
    if(myselfFollow.value.includes(item.user_id)){
      item.mutual_follow = true
    }else{
      item.mutual_follow = false
    }
  })
})

</script>

<style lang='scss' scoped>
.follow-right {
  border-left: 1px solid var(--bs-divider-color);
  padding: 20px;
  box-sizing: border-box;

  .user-message {
    .message-item {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .message-content {
        display: flex;
        align-items: center;

        .message-box {
          display: flex;
          flex-direction: column;
          margin-left: 30px;
        }
      }
    }
  }
}
</style>